<template>
  <el-dialog :title="formData.id ? '编辑角色' : '新增角色'" :visible="showDialog" @close="closeFn">
    <el-form ref="form" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="formData.description" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-row type="flex" justify="center">
        <el-button size="small" @click="closeFn">取消</el-button>
        <el-button size="small" type="primary" @click="confirmFn">确认</el-button>
      </el-row>
    </span>
  </el-dialog>
</template>

<script>
import { addRole, getRoleDetailById, updateRole } from '@/api/setting'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: '', // 角色名称
        description: '' // 角色描述
      },
      rules: {
        name: [
          { required: true, message: '角色名称不能为空!', trigger: 'blur' },
          { min: 1, max: 4, message: '角色名称1~4个字符' }
        ],
        description: [
          { required: true, message: '角色描述不能为空!', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeFn() {
    //   this.$emit('closeEvent')
    // sync语法：
    // 1 父组件中,在父传子 绑定属性的时候加上这个修饰符
    // 2 子组件中, 子传父的代码必须要通过以下语法来实现
    //    this.$emit('update:props中的变量名',要修改的值)
    // 就是把false的值同步给父组件中的visibleDialog
      this.$emit('update:showDialog', false)
      //   清空表单数据
      this.formData = {
        name: '',
        description: ''
      }
      //   清空校验规则 ---  也能清空表单内容(但是只能清空绑定在表单中属性的值)
      this.$refs.form.resetFields()
    },
    // 点击确定 新增/编辑  --- 共用弹框
    async confirmFn() {
      // 校验规则  通过才能调用接口
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 有id是新增
        await updateRole(this.formData)
      } else {
        // 没有id是新增
        //   调用接口
        await addRole(this.formData)
      }
      // 关闭弹窗
      this.closeFn()
      // 刷新列表
      this.$emit('updateEvent')
    },
    // 获取角色详情
    async getRoleDetail(id) {
      // 添加等待加载效果
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        body: true
      })
      // 数据回显
      this.formData = await getRoleDetailById(id)
      // 请求结束 关闭加载效果
      loading.close()
    }
  }
}
</script>

<style scoped>

.is-fullscreen{
  /* 让加载效果层级更高，避免被覆盖 */
  z-index: 999999 !important;
}
</style>
